<template>
  <v-container>
    <v-card class="searchBar">
      <search-bar :clearnSearch="clearnSearch" :searching="searching" @searchText="searchText" @focus="showHistory=true" @blur="searchBlur"></search-bar>
      <search-history v-if="showHistory" :update="historyUpdate" @clickHistoryLi="searchText"></search-history>
    </v-card>
    <div id="scroll-target" class="viewBox" @scroll="onScroll">
      <router-view :searchData="searchData" :noMore="noMore"></router-view>
      <v-btn v-if="showBackBtn" fixed dark fab bottom left color="orange lighten-1" @click="gotoMainPage">
        <v-icon>reply_all</v-icon>
      </v-btn>
    </div>
  </v-container>
</template>

<script>
import SearchBar from '../components/SearchBar';
import SearchHistory from '../components/SearchHistory';
import utils from '../utils/commonUtils';
import { setTimeout } from 'timers';

export default {
  name: 'home',
  components: {
    SearchBar,
    SearchHistory
  },
  data () {
    return {
      showHistory: false,
      searching: false,
      sText: '',
      historyUpdate: 0,
      searchData: [],
      clearnSearch: 0,
      showBackBtn: false,
      noMore: false,
      page: 1,
      firstSearch: true
    }
  },
  methods: {
    gotoMainPage () {
      this.$router.push('/');
      this.clearnSearch++;
      this.showBackBtn = false;
    },
    searchBlur(){
      setTimeout(()=>{
        this.showHistory=false;
      },100)
    },
    searchText (text) {
      this.noMore = false;
      this.searching = true;
      this.sText = text;
      this.page = 1;
      this.searchData = [];
      this.firstSearch = true;
      this.getData(this.sText);
    },
    loadMore () {
      this.searching = true;
      this.page++;
      this.getData(this.sText);
    },
    getData (text) {
      utils.getTianApi('lajifenlei/', {
        word: text,
        num: 10,
        page: this.page
      }).then(data => {
        if (data.length < 10) {
          this.noMore = true;
        }
        if (data.length <= 0) {
          return;
        }
        this.searchData = [...this.searchData, ...data];
        if (this.firstSearch) {
          let saveHis = {
            type: '5',
            text: text
          };
          if (data[0].name === text || data[1].name === text) {
            saveHis.type = '' + data[0].type;
          }
          utils.searchHistory.addHistory(saveHis);
          this.showBackBtn = true;
          this.searching = false;
          this.firstSearch = false;
          this.$router.push('/slist');
        } else {
          this.searching = false;
        }
      }).catch(msg => {
        this.$store.dispatch('showAlert', { text: msg });
        this.searching = false;
      });
    },
    onScroll (e) {
      let ele = e.target;
      let scrollBottom = ele.scrollHeight - ele.scrollTop - ele.offsetHeight;
      if (scrollBottom < 50 && !this.firstSearch && !this.searching && !this.noMore && this.showBackBtn) {
        this.loadMore();
      }
    }
  },
  watch: {
    showHistory () {
      if (this.showHistory) {
        this.historyUpdate++;
      }
    }
  }
}
</script>
<style lang="less" scoped>
.viewBox {
  position: fixed;
  top: 80px;
  bottom: 0px;
  left: 16px;
  right: 16px;
  overflow-y: scroll;
  z-index: 50;
}
.searchBar {
  z-index: 999;
}
.focusdiv {
  position: fixed;
  top: 18px;
  left: 18px;
}
</style>
